<template>
    <div id="Login">
        <NavBar
            :title="isLoginPage ? '登录页面' : '欢迎注册'"
            left-arrow
            placeholder
            fixed
            @click-left="handleBack"
        />
        <div class="logoWrap">
            <img src="@/assets/logo.png" alt class="logo" />
        </div>
        <!-- 用户登录表单 -->
        <van-form class="login-form" v-if="isLoginPage">
            <van-cell-group inset class="cell">
                <van-field
                    v-model="userForm.mobile"
                    required
                    label="手机号码"
                    left-icon="user-circle-o"
                    placeholder="请输入手机号码"
                    :rules="[{ required: true, message: '请输入手机号码' }]"
                />
                <van-field
                    v-model="userForm.password"
                    required
                    label="登录密码"
                    left-icon="user-o"
                    placeholder="请输入登录密码"
                    type="password"
                    autocomplete
                    :rules="[{ required: true, message: '请输入登录密码' }]"
                />
            </van-cell-group>
        </van-form>
        <!-- 用户注册表单 -->
        <van-form class="register-form" v-else>
            <van-cell-group inset class="cell">
                <van-field
                    required
                    label="手机号码"
                    left-icon="phone-circle-o"
                    placeholder="请输入手机号码"
                    :rules="[{ required: true, message: '请输入手机号码' }, { pattern: /^1\d{10}$/, message: '请输入正确的手机号码' }]"
                    v-model="registerForm.mobile"
                ></van-field>
                <van-field
                    v-model="registerForm.sms"
                    center
                    left-icon="smile-comment-o"
                    required
                    clearable
                    label="验证码"
                    placeholder="请输入短信验证码"
                    type="number"
                    maxlength="6"
                    :rules="[{ required: true, message: '请输入短信验证码' }]"
                >
                    <template #button>
                        <van-button
                            size="mini"
                            type="primary"
                            @click="sendSms"
                            :disabled="!sendSmsIsUsable"
                        >{{ sendSmsInfo }}</van-button>
                    </template>
                </van-field>
                <van-field
                    required
                    label="登录密码"
                    left-icon="certificate"
                    placeholder="设置登录密码"
                    type="password"
                    autocomplete
                    :rules="[{ required: true, message: '请设置登录密码' }, { validator: () => registerForm.password === registerForm.confirm, message: '两次输入的密码不一致' }]"
                    v-model="registerForm.password"
                ></van-field>
                <van-field
                    required
                    label="确认密码"
                    left-icon="certificate"
                    placeholder="请再次输入登录密码"
                    type="password"
                    autocomplete
                    :rules="[{ required: true, message: '请输入确认登录密码' }, { validator: () => registerForm.password === registerForm.confirm, message: '两次输入的密码不一致' }]"
                    v-model="registerForm.confirm"
                ></van-field>
            </van-cell-group>
        </van-form>

        <div class="clause" v-if="isLoginPage">
            <van-check-box icon-size="1rem" v-model="userForm.clause">
                我同意
                <a href="#">用户隐私政策</a>
            </van-check-box>
        </div>
        <div class="clause" v-else>
            <van-check-box icon-size="1rem" v-model="registerForm.clause">
                我同意
                <a href="#">用户注册协议</a>
            </van-check-box>
        </div>
        <van-button
            v-if="isLoginPage"
            type="primary"
            round
            @click="handleLogin"
            native-type="submit"
            class="login-btn"
        >登录</van-button>
        <van-button
            v-else
            type="primary"
            round
            @click="handleRegister"
            native-type="submit"
            class="login-btn"
        >注册</van-button>
        <a href="#" @click="isLoginPage = !isLoginPage">{{ isLoginPage ? '快速注册' : '我要登录' }}</a>
    </div>
</template>

<script  setup>
import { NavBar, Form as vanForm, CellGroup as vanCellGroup, field as vanField, Button as vanButton, Checkbox as vanCheckBox, Toast } from 'vant'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getRegCode, userRegsiter, userLogin } from '@/api'
import storage from '@/utils/storage.js'
const router = useRouter()
const isLoginPage = ref(true)
const handleBack = () => {
    router.back()
}
// 用户登录表单
const userForm = reactive({
    mobile: '13888888123',
    password: '246810',
    clause: true
})
const handleLogin = async () => {
    if (!userForm.mobile || !userForm.password) {
        Toast.fail('请输入完整信息')
    } else if (userForm.clause) {
        const { code, data: { data }, msg } = await userLogin(userForm.mobile, userForm.password)
        if (code === 200) {
             storage.setItem(data)
            Toast.success('登录成功')
            const pre = decodeURIComponent(router.currentRoute.value.query.pre)
            if (pre === 'undefined') {
                router.back()
            } else {
                router.push(pre)
            }
        } else {
            Toast.fail(msg)
        }
    } else {
        Toast.fail('请阅读并同意用户协议')
        return false
    }
}

// 用户注册表单
const registerForm = reactive({
    mobile: '18812345678',
    sms: '',
    password: '',
    confirm: '',
    clause: false
})
const sendSmsIsUsable = ref(true)
const sendSmsInfo = ref('发送验证码')

const sendSms = async () => {
    if (!registerForm.mobile) {
        Toast.fail('请输入手机号码')
    } else if (sendSmsIsUsable.value) {
        const getCodeRes = await getRegCode(registerForm.mobile)
        if (getCodeRes.code === 200) {
            sendSmsIsUsable.value = false
            let count = 60
            Toast.success('验证码发送成功')
            const timer = setInterval(() => {
                count--
                sendSmsInfo.value = `${count}s后重新发送`
                if (count === 0) {
                    clearInterval(timer)
                    sendSmsInfo.value = '发送验证码'
                    sendSmsIsUsable.value = true
                }
            }, 1000)
        }
    } else {
        Toast.fail('请稍后再试')
    }
}
const handleRegister = async () => {
    if (!registerForm.mobile || !registerForm.sms || !registerForm.password || !registerForm.confirm) {
        Toast.fail('请输入完整信息')
    } else if (registerForm.password !== registerForm.confirm) {
        Toast.fail('两次输入的密码不一致')
    } else if (!registerForm.clause) {
        Toast.fail('请阅读并同意用户协议')
    } else {
        const registerRes = await userRegsiter(registerForm.mobile, registerForm.sms)
        if (registerRes.code === 200) {
            router.push('/')
            Toast.success('注册成功')
        } else {
            Toast.fail('注册失败')
        }
    }
}
</script>

<style lang='less'>
#Login {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
    .logoWrap {
        margin-top: 50px;
        width: 150px;
        height: 150px;
        .logo {
            width: 100%;
            height: 100%;
        }
    }
    .login-form {
        width: 100%;
        margin-top: 50px;
        margin-bottom: 10vh;
        .cell {
            width: 90%;
        }
    }
    .register-form {
        width: 100%;
        margin: 20px;
    }
    .clause {
        margin-top: 20px;
        width: 90%;
    }
    .login-btn {
        width: 80%;
        margin: 20px;
    }
}
</style>
